<template>
  <div class="cesium-tool"></div>
</template>

<script lang="ts" setup>
import { APILayerType } from '@/enum/cimup';
import { useStageStore } from '@/store/stage';

defineOptions({
  name: 'EditTool',
});

const stageStore = useStageStore();

watch(
  () => [stageStore.layerId, stageStore.layerLoadedIdList],
  () => {
    if (stageStore.layerId && stageStore.layerData?.type === 'GLTFMODEL') {
      if (!stageStore.layerLoadedIdList.includes(stageStore.layerId)) {
        return;
      }
      beginEdit();
      return;
    }
    endEdit();
  },
  {
    deep: true,
  }
);

const { cimInstance } = window;

const cacheLayerId = ref('');

onMounted(() => {
  bindEvents();
});

onBeforeUnmount(() => {
  endEdit();
  unbindEvents();
});

const beginEdit = () => {
  endEdit();
  // 可以设置 9 值的类型
  if (
    ![
      APILayerType.GLTFMODEL.toUpperCase(),
      APILayerType.LABELMARKER.toUpperCase(),
      APILayerType.GLTFMODELEFFECT.toUpperCase(),
      APILayerType.PARAMETER.toUpperCase(),
      APILayerType.PARTICLE.toLocaleUpperCase(),
    ].includes(stageStore.layerData.type)
  ) {
    return;
  }
  cacheLayerId.value = stageStore.layerId;
  cimInstance.api.setLayerOrbitControl(stageStore.layerId, (backAttr: any) => {
    if (!stageStore.layerData.data || stageStore.layerData?.type !== 'GLTFMODEL') return;
    if (
      [
        APILayerType.LABELMARKER.toUpperCase(),
        APILayerType.GLTFMODELEFFECT.toUpperCase(),
        APILayerType.PARAMETER.toUpperCase(),
        APILayerType.PARTICLE.toLocaleUpperCase(),
      ].includes(stageStore.layerData.type)
    ) {
      return;
    }
    console.log('--------------------------------');
    console.log('backAttr.scale', JSON.stringify(backAttr.scale));
    const {
      cartographic: { longitude, latitude, height },
      rotation: { x: rotationX, y: rotationY, z: rotationZ },
      scale: [scaleX, scaleY, scaleZ],
    } = backAttr;

    stageStore.layerData.data.positions[0][0] = longitude;
    stageStore.layerData.data.positions[0][1] = latitude;
    stageStore.layerData.data.positions[0][2] = height;
    stageStore.layerData.data.rotation[0] = rotationX;
    stageStore.layerData.data.rotation[1] = rotationY;
    stageStore.layerData.data.rotation[2] = rotationZ;
    if (stageStore.layerData.data.isScale) {
      stageStore.layerData.data.scaleAll = scaleX;
    } else {
      if (stageStore.layerData.data.scale instanceof Array) {
        stageStore.layerData.data.scale[0] = scaleX * 100;
        stageStore.layerData.data.scale[1] = scaleY * 100;
        stageStore.layerData.data.scale[2] = scaleZ * 100;
      }
    }
  });
  cimInstance.api.changeOrbitControlMode('translation');
};

const endEdit = () => {
  if (!cacheLayerId.value) {
    return;
  }
  cimInstance.api.changeOrbitControlMode('');
  cimInstance.api.deleteOrbitControl(cacheLayerId.value);
  cacheLayerId.value = '';
};

const bindEvents = () => {
  window.addEventListener('keyup', handleKeyup);
};
const unbindEvents = () => {
  window.removeEventListener('keyup', handleKeyup);
};

const handleKeyup = (e: KeyboardEvent) => {
  e.preventDefault();
  if (e.key.toUpperCase() === 'W') {
    // 移动
    cimInstance.api.changeOrbitControlMode('translation');
  } else if (e.key.toUpperCase() === 'E') {
    // 旋转
    cimInstance.api.changeOrbitControlMode('rotation');
  } else if (e.key.toUpperCase() === 'R') {
    // 缩放
    cimInstance.api.changeOrbitControlMode('scale');
  } else if (e.key.toUpperCase() === 'Z' && e.ctrlKey) {
    cimInstance.api.undoOrbitControl();
  }
};
</script>

<style lang="less" scoped>
.cesium-tool {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
</style>
